import React, { Component } from "react";
import {
  Space,
  Table,
  Button,
  Row,
  Col,
  Popconfirm,
  message,
  Drawer,
  Tag,
} from "antd";
import { courseDel, courseGet } from "../../api/course";
import RoleFrom from "./components/role-from";
import { roleLook, roleDel, roleBatchDel } from "../../api/system";
import { routerKVP } from "../../utils/tools";

export default class Role extends Component {
  state = {
    modalOpen: false,
    roleList: [],
    roleInfo: null,
    changesData: [],
  };
  componentDidMount = () => {
    roleLook().then((res) => {
      this.setState({
        roleList: res.data.results,
      });
    });
  };
  columns = [
    {
      title: "角色id",
      dataIndex: "objectId",
      key: "objectId",
    },
    {
      title: "角色名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "角色权限",
      dataIndex: "power",
      key: "power",
      render: (power) => {
        return power.map((item, i) => {
          return (
            <Tag color="cyan" key={i}>
              {routerKVP()[item]}
            </Tag>
          );
        });
      },
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <Button
            type="primary"
            size="small"
            onClick={() => {
              this.showModal(true, record);
            }}
          >
            编辑
          </Button>
          <Popconfirm
            title="删除"
            description="确认要删除这条数据吗？"
            onConfirm={() => {
              this.handleDel(record.objectId);
            }}
            onCancel={this.cancel}
            okText="Yes"
            cancelText="No"
          >
            <Button type="primary" danger size="small">
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];
  handleDel = (id) => {
    const { roleList } = this.state;
    roleDel(id).then((_) => {
      let arr = roleList.filter((item) => item.objectId != id);
      this.setState({
        roleList: arr,
      });
    });
    message.success("删除成功");
  };
  cancel = () => {
    message.error("取消操作");
  };
  showModal = (bool, roleInfo) => {
    this.setState({
      modalOpen: bool,
      roleInfo: roleInfo,
    });
  };
  handleFinish = (bool) => {
    this.setState({
      modalOpen: bool,
    });
  };
  handleFrom = (bool, id, roleInfo) => {
    const { roleList } = this.state;
    const leng = roleList.length;
    for (let i = 0; i < leng; i++) {
      if (roleList[i].objectId == id) {
        roleList[i] = { objectId: id, ...roleInfo };
        this.setState({
          modalOpen: bool,
          roleList: [...roleList],
        });
      } else {
        this.setState({
          modalOpen: bool,
          roleList: [...roleList, { objectId: id, ...roleInfo }],
        });
      }
    }
  };
  handleChanges = (changes) => {
    this.setState({
      changesData: changes,
    });
  };
  handleChangesDel = () => {
    const { changesData, roleList } = this.state;
    roleBatchDel(changesData).then((_) => {
      let arr = roleList.filter((item) => !changesData.includes(item.objectId));
      this.setState({
        roleList: arr,
      });
      message.success("删除选择成功！");
    });
  };
  render() {
    const { modalOpen, roleInfo, changesData } = this.state;
    return (
      <div>
        <Row justify="start">
          <Col span={6}>
            <Button
              type="primary"
              onClick={() => {
                this.showModal(true, null);
              }}
            >
              编辑角色
            </Button>
            {changesData.length ? (
              <Button type="primary" danger onClick={this.handleChangesDel}>
                删除选中
              </Button>
            ) : (
              ""
            )}
          </Col>
        </Row>
        <Drawer
          title={roleInfo ? "编辑角色" : "新增角色"}
          placement="right"
          onClose={() => {
            this.handleFinish(false);
          }}
          open={modalOpen}
        >
          {modalOpen ? (
            <RoleFrom
              roleInfo={roleInfo}
              handleFrom={this.handleFrom}
            ></RoleFrom>
          ) : (
            ""
          )}
        </Drawer>
        <Table
          columns={this.columns}
          dataSource={this.state.roleList}
          rowKey="objectId"
          rowSelection={{
            type: "checkbox",
            onChange: this.handleChanges,
          }}
        />
      </div>
    );
  }
}
